<template>
  <div class="videoPart flex">
    <span class="LeftBotton"></span>
    <div
      id="ISL_Cont_1"
      :style="{
        width: width + '%',
        position: 'relative',
        overflow: 'hidden',
        height: height + 'px',
      }"
    >
      <swiper class="swiper" :options="swiperOption" v-if="imgList && imgList.length > 0">
        <swiper-slide v-for="item in imgList" :key="item.index">
          <!-- <el-image class="imgq"
      style="width: 100%; height: 100%"
      src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      fit="fill"></el-image> -->
          <img :src="getimg(item)" class="imgq" alt="" @click="toDetail(item)" />
          <div :title="item.书名" class="textFlow txtdivsw" @click="toDetail(item)">
            {{ item.书名 }}
          </div>
        </swiper-slide>

        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </div>
    <span class="RightBotton"> </span>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
  props: {
    imgList: {
      type: Array,
    },
    width: {
      typeof: null,
    },
    shownumber: {
      typeof: Number,
    },
    height: {
      typeof: Number,
    },
    imgWidth: {
      typeof: Number,
    },
  },
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      page: 1,
      timer: null,
      jqWidth: '',
      page_last: '',
      swiperOption: {
        slidesPerView: this.shownumber,
        // spaceBetween: 10,
        direction: 'horizontal',
        loop: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },
        navigation: {
          nextEl: '.swiper-button-prev',
          prevEl: '.swiper-button-next',
        },
      },
    };
  },
  created() {
    //this.slide()
  },
  methods: {
    toDetail(item) {
      this.$router.push({ path: '/booklistdetails', query: { id: item.id } });
    },
    getimg(item) {
      var src = window.SITE_CONFIG.imgUrl;
      var filename = item.filename;
      var imgname = filename.slice(0, filename.lastIndexOf('.')) + '.png';
      var fileextension = filename.slice(filename.lastIndexOf('.') + 1);

      if (filename.indexOf('0497') >= 0) {
        src = src + '/0497/' + imgname;
      } else if (fileextension == 'teb') {
        src = src + '/teb/' + imgname;
      } else {
        src = src + imgname;
      }

      return src;
    },
  },
};
</script>

<style scoped>
.videoPart {
  width: 100%;
  margin: 0 auto;
  margin-top: 40px;
}
.videoPart > span {
  width: 70px;
  height: 60px;
  cursor: pointer;
}
.ScrCont {
  position: absolute;
  left: 0px;
}
.videoPart ul li {
  height: 163px;
  position: relative;
  margin-right: 24px;
  cursor: pointer;
}
.videoPart ul span {
  display: inline-block;
  line-height: 40px;
  width: 188px;
  text-align: center;
}
.videoPart .LeftBotton {
  /* background-image: url('../../../assets/ldyx/left.png'); */
  background-repeat: no-repeat;
  background-position: center;
}
.videoPart .RightBotton {
  /* background-image: url('../../../assets/ldyx/right.png'); */
  background-repeat: no-repeat;
  background-position: center;
}
.videoPart .txtdivsw {
  margin-top: 10px;
  text-align: center;
  padding: 0 1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 16px;
  font-family: NotoSansHans-Medium, NotoSansHans;
  font-weight: 500;
  color: #204171;
  line-height: 24px;
  cursor: pointer;
}
.imgq {
  width: 160px;
  height: 220px;
}
</style>

<style>
.swiper-slide {
  text-align: center;
}
</style>
